<template>
  <Scroll class="listview" :data="data" ref="listview"
  :listenScroll="listenScroll" @scroll="scroll" :probeType="probeType">
  	<ul>
  		<li v-for="group in data" class="list-group" ref="listGroup">
  			<h2 class="title">{{group.title}}</h2>
  			<ul>
  				<li v-for="item in group.items" class="item flex middle" @click="selectItem(item)">
  					<img v-lazy="item.avatar" class="avatar">
  					<span class=" l hui">{{item.name}}</span>
  				</li>
  			</ul>
  		</li>
  	</ul>
  	<div class="cutlist" @touchstart="onShortcut" @touchmove.stop.prevent="onShortcutMove">
  		<ul>
  			<li v-for="(item, index) in shortcutList"
  			class="m hui name"
  			:data-index="index" :class="{'active':currentIndex===index}" >{{item}}</li>
  		</ul>
  	</div>
  	<div class="list-fixed" v-show="fixedTitle" ref="fixed"><h1 class="fixed-title">{{fixedTitle}}</h1></div>
  </Scroll>
</template>

<script type="text/ecmascript-6">
 import Scroll from 'base/scroll/scroll'
 import {getData} from 'common/js/dom'
  const ANCHOR_HEIGHT = 18;
  const TITLE_HEIGHT = 30;
export default{
  props:{
  	data:{
  		type:Array,
  		default:[]
  	}
  },
    data(){
    	return{
    	scrollY:-1,
    	currentIndex:0,
    	diff: -1
    }},
  created(){
  	this.touch={};
  	this.listenScroll=true;
  	this.probeType=3;
  	this.listHeight=[]
  },
// 计算属性,动态更新的data
  computed:{
  	shortcutList(){
  		return this.data.map((e)=>{
  			return e.title.slice(0,1)
  		})
		},
		//动态监听, 一般修改dom样式
  	fixedTitle(){
  		if(this.scrollY>0){ return}
  	 return this.data[this.currentIndex] ? this.data[this.currentIndex].title : ''
  	}
  	 },
  methods:{
    refresh(){
      this.$refs.listview.refresh()
    },
     selectItem(item){
      this.$emit('select',item)
		 },
		 /**
			* 点击 导航条
		  */
  	onShortcut(e){
  		let index=getData(e.target,'index');
  		let firstTouch=e.touches[0];
  		this.touch.y1=firstTouch.pageY;
  		this.touch.anchorIndex=index;
  		this._scrollTo(index)
		},
		/**
		 * 滑动 导航条
		 */
  	onShortcutMove(e){
  		let firstTouch=e.touches[0];
  		this.touch.y2=firstTouch.pageY;
  		let delta=(this.touch.y2-this.touch.y1)/ANCHOR_HEIGHT|0; // x|0 取整
  		let anchorIndex=parseInt(this.touch.anchorIndex) +delta;
  		this._scrollTo(anchorIndex)
  	},
  	_scrollTo(index){
  		if(index!==0&&!index){
  			return ''
  		}
  		if(index<0){
  			index=0
  		}else if(index>this.listHeight.length-2){
  			index=this.listHeight.length-2
  		}
  		this.scrollY=-this.listHeight[index];
  		this.$refs.listview.scrollToElement(this.$refs.listGroup[index],0)
  	},
  	scroll(pos){
  		this.scrollY=pos.y
  	},
  	_calculateHeight(){
  		this.listHeight=[];
  		const list=this.$refs.listGroup;
  		let height=0;
  		this.listHeight.push(height);
  		for(let i=0;i<list.length;i++){
  			let item=list[i];
  			height+=item.clientHeight;
  			this.listHeight.push(height);
  		}
  	}
  },
  watch:{
//data 监听data改变,触发更改
data(){
	setTimeout(()=>{
		this._calculateHeight()
	},20)
},
// scrollY 
scrollY(newY){
	const listHeight=this.listHeight;
if (newY > 0) {
          this.currentIndex = 0
          return
        }
	for (let i = 0; i <listHeight.length-1; i++) {
		let height1=listHeight[i];
		let height2=listHeight[i+1];
		if (-newY >= height1 && -newY < height2) {
			this.currentIndex=i;
			this.diff=height2+newY
			return
		}
	}
	this.currentIndex = listHeight.length - 2
},
diff(newVal){
	let fixedTop=(newVal>0&&newVal<TITLE_HEIGHT)?newVal-TITLE_HEIGHT:0;
	if(this.fixedTop===fixedTop){
		return
	}
	this.fixedTop=fixedTop
	this.$refs.fixed.style.transform=`translate3d(0, ${fixedTop}px, 0)`
}
  },
  components:{
  	Scroll
  }
}
</script>

<style rel="stylesheet" lang="less">
  .listview{
  	 position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #222;
  	.title,.fixed-title{
  	height: 30px;
    line-height: 30px;
    padding-left: 20px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    background: #333;
  	}
  	.avatar{
  		width: 50px;
  		height: 50px;
  		border-radius: 50%;
  		margin-right: 20px;
  	}
  	.cutlist{
  		position: absolute;
  		z-index: 2;
  		right: 0;
  		top: 50%;
  		transform:translateY(-50%);
  		width: 20px;
  		padding: 20px 0;
  		border-radius: 6px;
  		text-align: center;
  	}
  	.name{
  		padding: 3px;
  	}
  	 .active {
    color: #ffcd32;
}
  }
  .list-fixed{
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  }

</style>
